<template>
	<view class="business">
		<image class="head-bg" src="@/static/business/bg.jpg" mode="widthFix"></image>
		<Title title="入驻专享" detail="Exclusive access"></Title>
		<view class="list-data">
			<view class="item" v-for="(item, index) in listData" :key="index">
				<image class="img" :src="item.img" :alt="item.title"></image>
				<view class="title">{{ item.title }}</view>
				<view class="detail ">
					{{ item.detail }}
				</view>
			</view>
		</view>
		<Title title="商家服务" detail="Business services"></Title>
		<image src="@/static/business/new-business.jpg" mode="widthFix" class="goods-service"></image>
		<Title title="立即报名申请入驻"></Title>
		<view class="submit-info">
			<view class="item">
				<image class="img" src="@/static/business/person.png" alt=""></image>
				<input class="input" type="text" placeholder="姓名" v-model.trim="name">
			</view>
			<view class="item">
				<image class="img" src="@/static/business/phone.png" alt=""></image>
				<input class="input" type="tel" maxlength="11" placeholder="联系电话" v-model.trim="phone">
			</view>
			<view class="item">
				<image class="img" src="@/static/business/city.png" alt=""></image>
				<input class="input" type="text" placeholder="所在地区" v-model.trim="city">
			</view>
			<view class="item">
				<image class="img" src="@/static/business/goods.png" alt=""></image>
				<input class="input" type="text" placeholder="主要商品名称" v-model.trim="goodsName">
			</view>
			<view class="submit" @click="handelSubmit">
				申请入驻
			</view>
		</view>

	</view>
</template>
<script>
	import listData from "@/common/business.js";
	import Title from './headTitle.vue';
	export default {
		name: "Business",
		components: {
			Title
		},
		data() {
			return {
				listData,
				name: "",
				phone: "",
				city: "",
				goodsName: "",
			}
		},
		methods: {
			handelSubmit() {

			}
		}
	}
</script>
<style lang="scss" scoped>
	.business {
		padding-bottom: 20rpx;
		background-color: white;

		.head-bg,
		.goods-service {
			width: 100%;
		}

		.list-data {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;

			.item {
				background-color: #fff7f5;
				margin-bottom: 10rpx;
				width: 242rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				padding: 20rpx 0;
				box-sizing: border-box;

				&:nth-of-type(2),
				&:nth-of-type(5) {
					margin: 0 10rpx;
					margin-bottom: 10rpx;
				}

				.img {
					width: 120rpx;
					height: 120rpx;
				}

				.title {
					margin-top: 20rpx;
					margin-bottom: 10rpx;
					font-size: 28rpx;
					font-weight: bold;
				}

				.detail {
					font-size: 24rpx;
					transform: scale(.8);
					white-space: nowrap;
				}
			}
		}

		.submit-info {
			display: flex;
			flex-direction: column;
			align-items: center;

			.item {
				width: 600rpx;
				height: 110rpx;
				border-radius: 50rpx;
				background-color: #f4f4f4;
				display: flex;
				padding: 30rpx;
				margin-bottom: 20rpx;
				box-sizing: border-box;

				.img {
					width: 50rpx;
					height: 50rpx;
				}

				.input {
					border: 0;
					outline: 0;
					margin-left: 30rpx;
					background-color: transparent;
				}
			}

			.submit {
				width: 600rpx;
				height: 110rpx;
				border-radius: 50rpx;
				background-color: #f19762;
				line-height: 110rpx;
				text-align: center;
				letter-spacing: 4rpx;
				color: white;
			}
		}
	}
</style>
